<template>
  <div style="width: 100%; height:100%;display: flex;">
    <div class="left-wraper" :class="{'collapse':isCollapse}">
      <!--顶部logo-->
      <div style="text-align: center; border-bottom:2px solid #464646">
        <router-link to="/admin/index">
          <img src="@/assets/logo.png" />
        </router-link>
      </div>

      <!--左侧导航-->
      <div class="menu-wraper">
        <el-menu :default-active="activeMenu" background-color="#2C3E50" text-color="#fff"
          :unique-opened="true" active-text-color="#55aaff">
          <router-link to="/admin/">
            <el-menu-item index="admin-index">
              <i class="edu icon-home"></i>&nbsp;
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>

          <el-submenu index="system">
            <template slot="title">
              <i class="edu icon-yewu"></i>&nbsp;
              <span>业务中心</span>
            </template>

            <router-link to="/admin/business/student/index">
              <el-menu-item index="admin-business-student-index"><i class="edu icon-xueyuandangan"></i> 学员档案
              </el-menu-item>
            </router-link>
          </el-submenu>



          <el-submenu index="educational">
            <template slot="title">
              <i class="edu icon-jiaowuxitong"></i>&nbsp;
              <span>教务中心</span>
            </template>

           <router-link to="/admin/educational/student/index">
             <el-menu-item index="admin-educational-student-index"><i class="edu icon-xueyuandangan"></i> 学员管理
             </el-menu-item>
           </router-link>

           <router-link to="/admin/educational/class/index">
             <el-menu-item index="admin-educational-class-index"><i class="edu icon-banjiguanli"></i> 班级管理
             </el-menu-item>
           </router-link>


           <router-link to="/admin/educational/timetable/index">
             <el-menu-item index="admin-educational-timetable-index"><i class="edu icon-kebiao"></i> 课表管理
             </el-menu-item>
           </router-link>

           <router-link to="/admin/educational/course/index">
             <el-menu-item index="admin-educational-course-index"><i class="edu icon-kechengguanli"></i> 课程管理
             </el-menu-item>
           </router-link>

           <router-link to="/admin/educational/classroom/index">
             <el-menu-item index="admin-educational-classroom-index"><i class="edu icon-banjiguanli"></i> 教室管理
             </el-menu-item>
           </router-link>


           <router-link to="/admin/educational/teacher/index">
             <el-menu-item index="admin-educational-teacher-index"><i class="edu icon-laoshi"></i> 教师管理
             </el-menu-item>
           </router-link>
          </el-submenu>


          <!--系统管理-->
          <el-submenu index="system">
            <template slot="title">
              <i class="edu icon-shezhi"></i>&nbsp;
              <span>系统管理</span>
            </template>
            <router-link to="/admin/system/basic/index">
              <el-menu-item index="admin-system-basic-index"><i class="scp icon-payment"></i> 机构信息
              </el-menu-item>
            </router-link>

            <router-link to="/admin/system/school/index">
              <el-menu-item index="admin-system-school-index"><i class="scp icon-payment"></i> 机构管理
              </el-menu-item>
            </router-link>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!--右侧内容-->
    <div class="right-wraper">
      <div class="toolbar-wraper">
        <div @click="isCollapse=!isCollapse"
          style="width: 35px; height: 35px;  margin: 4px; font-size: 24px; text-align: center; cursor: pointer;"
          :title="isCollapse==true?'显示导航菜单':'隐藏导航菜单'">
          <i class="el-icon-s-fold" v-if="!isCollapse"></i>
          <i class="el-icon-s-unfold" v-if="isCollapse"></i>
        </div>
        <div style="padding:15px 15px;">
          <el-breadcrumb separator="/">
            <transition-group name="breadcrumb">
              <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
                <span v-if="item.redirect==='noRedirect'||index==levelList.length-1"
                  class="no-redirect">{{ item.meta.title }}</span>
                <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
              </el-breadcrumb-item>
            </transition-group>
          </el-breadcrumb>
        </div>
        <div style="flex: 1;"></div>
        <!--右侧头像-->
        <div style="margin-right: 20px; display: flex;">
          <div style="line-height:45px; margin-right: 20px;">
          <i class="el-icon-school"></i> {{school.schtitle}}</div>
          <div style="display: flex;">
            <el-dropdown trigger="click" style="cursor: pointer;" @command="handleCommand">
              <div class="el-dropdown-link" style="display: flex;">
                <el-avatar size="small" style="margin: 5px;border: 1px solid #999;"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                </el-avatar>
                <span v-if="userinfo.nickname">{{userinfo.nickname}}<i
                    class="el-icon-arrow-down el-icon--right"></i></span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="profile">
                  <i class="el-icon-setting"></i>账号设置
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <i class="el-icon-switch-button"></i>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <!--主内容区域-->
      <el-card style="flex-grow: 1; overflow-y:auto; margin:2px 0px 0px 0px;  background-color: white;">
        <router-view></router-view>
      </el-card>
    </div>

  </div>
</template>

<script>
  import api_helper from '../../utils/apihelper.js'
  export default {
    data() {
      return {
        activeMenu: 'admin-index',
        isCollapse: false,
        levelList: null,
        role: '',
        school:localStorage.getItem("school")==null ? null:JSON.parse(localStorage.getItem("school")),
        userinfo: JSON.parse(localStorage.getItem("userinfo")),
        account:'',
        accounts:[],
      }
    },
    mounted() {

       //检查管理权限
      if(localStorage.getItem("token")!=null && localStorage.getItem("userinfo")!=null){
        const uinfo=JSON.parse(localStorage.getItem("userinfo"));

      }else{
        this.$message.error("登录过期或权限不够!");
        localStorage.removeItem("userinfo");
        localStorage.removeItem("token");
        this.$router.push("/admin/login");
      }
    },
    methods: {
      handleSwitchAccount(supid){
        var option = this.accounts.filter(function(cur, index, a) {
          if (cur.id == supid) {
            return cur;
          }
        })[0];
         const params={
           supid:option.id,
           supname:option.name
         }
          api_helper.post("api/admin/account/change",params).then(res=>{
            if(res.status==200 && res.data.code){
                 localStorage.setItem("accountid",res.data.userinfo.accountid);
                 localStorage.setItem("account",res.data.userinfo.account);
                 localStorage.setItem("token",res.data.token);
                 localStorage.setItem("userinfo",JSON.stringify(res.data.userinfo));
                 this.$router.go(0);
            }else{
                this.$message.error(res.data.msg);
            }
          })
      },

      handleNaviSelect() {

      },
      handleCommand(cmd) {
        switch (cmd) {
          case "logout":
            this.$confirm("确定要退出登录吗？").then(() => {
              localStorage.removeItem("userinfo");
              localStorage.removeItem("token");
              this.$router.push("/admin/login");
            }).catch(() => {

            })
            break;
        }
      }
    },
    created() {
      var path = this.$route.fullPath.replace("/admin", "admin");
      this.activeMenu = path.replaceAll("/", "-");
      this.breadcrumbList = this.$route.meta.breadcrumb;
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    handleLink(item) {
      console.log(item);
    },
    watch: {
      $route() {
        var path = this.$route.fullPath.replace("/admin", "admin");
        this.activeMenu = path.replaceAll("/", "-");
        this.breadcrumbList = this.$route.meta.breadcrumb;
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
        this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      }
    }
  }
</script>

<style scoped>
  .left-wraper {
    width: 180px;
    background-color: #2C3E50;
    color: #E9E9E9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -o-transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
    transition-property: width, height, transform, background, font-size;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  }

  .collapse {
    width: 0px;
    -o-transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  }

  .menu-wraper {
    overflow-y: auto;
    overflow-x: hidden;
    height: 10000px;
    scrollbar-face-color: #C00;
    scrollbar-highlight-color: #F60;
    scrollbar-3dlight-color: #F00;
    scrollbar-darkshadow-color: #000;
    scrollbar-Shadow-color: #000;
    scrollbar-arrow-color: #FFF;
    scrollbar-track-color: #D6A27E;
  }

  ::-webkit-scrollbar {
    width: 0px;
  }

  .el-menu {
    border: none;
  }

  .el-menu-item {
    height: 45px;
    line-height: 45px;
  }

  .el-menu-item,
  >>>.el-submenu__title {
    height: 45px;
    line-height: 45px;
  }

  .el-menu-item.is-active {
    color: #FFFFFF !important;
    background-color: #0080FF !important;
  }

  .right-wraper {
    flex: 1;
    display: flex;
    background-color: #EEEEEE;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
  }

  .toolbar-wraper {
    height: 45px;
    background-color: #fff;
    flex: 0 0 auto;
    line-height: 40px;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
    display: flex;
  }
</style>
